<template>
  <div>
    <h2>Dapianzi's Blog ({{ catesCount }})</h2>
    <ul>
      <li v-for="cate in cates" :key="cate.name">
        <NuxtLink :to="cate.link">
          <a-icon :type="cate.icon"></a-icon>
          {{ cate.name }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('blog', ['cates']),
    ...mapGetters('blog', ['catesCount']),
  },
  mounted() {
    this.getCates()
  },
  methods: {
    ...mapActions('blog', ['getCates']),
  },
}
</script>
